<template>
    <div class="mainDiv">
      <img v-bind:src="require('../../assets/ad/vip_banner.png')" width="100%" >
      <mt-navbar v-model="selected">
        <mt-tab-item id="1"><span style="font-size: 16px">会员激活码</span></mt-tab-item>
        <mt-tab-item id="2"><span style="font-size: 16px">微信支付</span></mt-tab-item>
      </mt-navbar>

      <mt-tab-container v-model="selected" >
        <mt-tab-container-item id="1">
          <mt-field class='mgtop10 ' type="number" :state="state.code" v-model="code" :attr="{ 'maxlength': 20 }" label="会员激活码"></mt-field>
          <div class="padlr10">
            <mt-button size="large" type="primary" @click="vipViaCode()">申请vip</mt-button>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <!--开设院校-->
          <div class="padlr10">
            <mt-button size="large" type="primary" @click="wxPay()">微信支付(380元)</mt-button>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>

    </div>
</template>

<script>
  import {Toast} from 'mint-ui';

  export default {
    name: "vip",
    data() {
      return {
        selected: "1",
        code:"",
        state:{code:""}
      }
    },
    methods:{
      vipViaCode:function(){
         let vm  = this;
         this.state.code = /.{11,20}/.test(this.code)?'success':'error';
         if(this.state.code == 'error'){
           Toast("会员激活码输入错误!");
           return;
         }
         this.$http.get("/auth/vipViaCode?code="+this.code).then(resp=>{
            if(resp.code != 0){
              Toast(resp.msg);
            }else{
              Toast("恭喜您成为会员!");
              vm.$root.userInfo.vip_level = 1;
              window.isBack = true;
              window.history.go(-1);
            }
         })
      },
      wxPay:function(){
        let vm = this;
        this.$http.get("/auth/prepay").then(function(resp){
          // 判断返回结果
          if (resp.code  == 'SUCCESS') {
            //获取预支付单据成功，调起支付窗口
            if (typeof WeixinJSBridge == "undefined"){
              if( document.addEventListener ){
                document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(resp), false);
              }else if (document.attachEvent){
                document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(resp));
                document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady(resp));
              }
            }else{
              vm.onBridgeReady(resp);
            }
          }else{
            //获取预支付单据失败
            Toast("获取预支付单据失败，请重试");
          }
        })
      },
  //调起微信支付窗口
        onBridgeReady:function(data){
         let vm = this;
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
              "appId" : data.appId,
              "timeStamp": data.timeStamp,
              "nonceStr" : data.nonceStr,
              "package" : data.packageValue,
              "signType" : data.signType,
              "paySign" : data.paySign
            },
            function(res){
              // alert(JSON.stringify(res));
              if(res.err_msg == "get_brand_wcpay_request:ok" ){
                //支付成功
                vm.$root.userInfo.vip_level = 1;
                Toast("支付成功，跳转至个人中心");
                vm.$router.push("/UserCenter");
              }else if(res.err_msg == "get_brand_wcpay_request:cancel" ){
                //取消支付
                Toast("您已取消支付");
                //layer.open({content:"您已取消支付",time:5});
              }else{
                //支付失败
                Toast("支付失败，请重试");
              }

            }
          );
        }
    }
  }
</script>

<style scoped>

</style>
